<template>
  <view class="record-container">
    <uni-list>
      <uni-list-item direction="column">
        <template v-slot:header>
          <view class="record-header">
            <text class="header-item">已邀请好友</text>
            <text class="header-item">实名认证</text>
          </view>
        </template>
      </uni-list-item>

      <uni-list-item v-for="(item, index) in recordList" :key="index" direction="column">
        <template v-slot:body>
          <view class="record-item">
            <text class="item-text">{{ item.phonenumber }}</text>
            <text class="item-text" :style="{color: getStatusColor(item.rz)}">{{ item.rz | statusFilter }}</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
	
	<view class="list_status">
		{{status=='noData'?'暂无数据':status=='loadding'?'加载中...':status=='hasMore'?'下拉加载更多':status=='noMore'?'没有更多了':status=='error'?'加载出错,请稍后重试...':''}}
	</view>
  </view>
</template>

<script>
import { getInviteRecord } from "@/api/system/user";
export default {
  data() {
    return {
      recordList: [],
	  pageNum:1,
	  status:'noMore'
    }
  },
  created() {
    this.getInviteRecord()
  },
  filters: {

    statusFilter(val) {
      const statusMap = {
        '未认证': '未认证',
        '已认证': '已认证',
      }
      return statusMap[val] || ''
    }
  },
  onReachBottom() {
  	if(this.status == 'loadding' || this.status == 'noMore' || this.status == 'noData') return
  	this.pageNum++
  	this.getInviteRecord()
  },
  methods: {
    getInviteRecord() {
		this.status = 'loadding'
      getInviteRecord(this.$store.state.user.id,this.pageNum).then(res => {
		this.recordList = this.recordList.concat(res.rows)
		this.status = res.total==0?'noData':this.recordList.length == res.total?'noMore':'hasMore'
      }).catch((e)=>{
					this.status = 'error'
				})
    },
    getStatusColor(status) {
      const colorMap = {
        '未认证': '#999',
        2: '#3c96f3',
        '已认证': '#4cd964'
      }
      return colorMap[status] || '#999'
    }
  }
}
</script>

<style lang="scss" scoped>
.record-container {
  padding: 20rpx;

  .record-header, .record-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20rpx 0;

    .header-item, .item-text {
      flex: 1;
      text-align: center;
    }

    .header-item {
      font-weight: bold;
      color: #333;
    }
  }
}
.list_status{
		width: 100%;
		margin: 20rpx 0;
		font-size: 28rpx;
		text-align: center;
		color: #a2a6b1;
	}
</style>
